<template>
	<view class="content">
		<view>
			<!-- <view class="a8">
				<view class="a9">
					<view class="b1">置顶</view>
					<view class="b2">
						<image src="../../static/logo.png" class="b3"></image>
					</view>
				</view>
				<view class="b4">
					<view class="b5">系統消息</view>
					<view class="b6">消息消息消息消息消息消息消息消息消息消息消息消息消息消息消息消息消息消息消息消息消息消息消息消息</view>
				</view>
			</view> -->
			<view class="a8" v-for="(item,index) in chatMsgList" :key="index" @click="toMessage(item)">
				<view class="a9">
					<view class="b2">
						<view class="b7" v-if="item.unReadCount!=0">{{item.unReadCount}}</view>
						<image :src="item.avatar" class="b3"></image>
					</view>
				</view>
				<view class="b4">
					<view class="b5">{{item.nickName}}</view>
					<view class="b6">{{item.content}}</view>
				</view>
			</view>
		</view>
		<view style="clear: both;margin: 30px;">
			<u-loadmore :status="status" :line="isShowLine" :nomoreText="nomoreText" loadingIcon="spinner" />
		</view>
	</view>
</template>

<script>
	import {
		findChatUserMagList,
		updateUnread
	} from '../../config/api.js';
	export default {
		data() {
			return {
				current: 1,
				totalPages: 0,
				chatMsgList: [],
				refreshChatMsgList: [],
				isShowLine: false,
				status: 'nomore',
				nomoreText: '',
			}
		},
		onLoad() {
			let userId = uni.getStorageSync('userId')
			console.log("notify:userId" +userId)
			if(userId){
				this.findChatUserMagList();
			}
			
		},
		onReachBottom() {
			if (this.current >= this.totalPages) return;
			this.status = 'loading';
			this.current = ++this.current;
			var that = this
			setTimeout(() => {
				if (that.current >= that.totalPages) {
					that.status = 'nomore';
				} else {
					that.status = 'loading';
					that.isShowLine = false;
				}
				that.findVodPage();
				that.chatMsgList = that.chatMsgList.concat(that.refreshChatMsgList)

			}, 10)
		},
		methods: {
			findChatUserMagList() {
				this.isShowLine = false;
				var that = this
				// get请求
				findChatUserMagList("?current=" + that.current + "&size=15").then((res) => {
					that.totalPages = res.pages;
					that.refreshChatMsgList = res.records;
					if (that.current == 1) {
						that.chatMsgList = res.records;
					}
					if (that.current >= that.totalPages) {
						setTimeout(() => {
							that.status = 'nomore';
							that.nomoreText = "没有更多数据了"
							that.isShowLine = true;
						}, 10);
					}

				}).catch((e) => {
				})
			},
			/* 跳转消息页 */
			toMessage(item) {
				getApp().globalData.msgNum =getApp().globalData.msgNum-item.unReadCount
				item.unReadCount=0
				updateUnread("?toUserId="+item.fromUserid).then((res)=>{})
				let url = '/pages/chat/chat?userId='+item.fromUserid+"&avatar="+item.avatar+"&nickName="+item.nickName;
				uni.navigateTo({
					url: url,

				})
			}
		}
	}
</script>

<style>
	page {
		background-color: #e7e7e7,
	}
	@font-face {
		font-family: 'iconfont';
		/* Project id 2819500 */
		src: url('https://at.alicdn.com/t/font_2819500_q4ln4sf8w.woff2?t=1638772629762') format('woff2'),
			url('https://at.alicdn.com/t/font_2819500_q4ln4sf8w.woff?t=1638772629762') format('woff'),
			url('https://at.alicdn.com/t/font_2819500_q4ln4sf8w.ttf?t=1638772629762') format('truetype');
	}

	.maxTop {
		width: 100%;
		height: 180upx;
		background: url(https://flash-cloud.oss-cn-hangzhou.aliyuncs.com/bg.png);
		display: flex;
		flex-direction: row;
		align-items: center;
		padding-left: 30upx;
	}

	.minTop {
		width: 100%;
		height: 150upx;
		background: url(https://flash-cloud.oss-cn-hangzhou.aliyuncs.com/bg.png);
		display: flex;
		flex-direction: row;
		align-items: center;
		padding-left: 30upx;
	}

	.a1 {
		font-family: iconfont;
		color: #FFFFFF;
		font-size: 40upx;
		margin-right: 20upx;
		margin-top: 70upx;
	}

	.a2 {
		margin-top: 70upx;
		position: relative;
	}

	.a3 {
		font-family: iconfont;
		position: absolute;
		top: 18upx;
		bottom: 0;
		left: 30upx;
		color: #FFFFFF;
	}

	.a4 {
		background-color: #F9A938;
		height: 70upx;
		width: 370upx;
		border-radius: 25upx;
		padding-left: 80upx;
		font-size: 28upx;
		color: #FFFFFF;
	}

	.a5 {
		height: 80upx;
		line-height: 80upx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		padding-left: 50upx;
		padding-right: 42upx;
		border-bottom: 1upx solid #F1F1F1;
	}

	.a6 {
		font-size: 32upx;
	}

	.a7 {
		font-family: iconfont;
		color: #666666;
		font-size: 32upx;
	}

	.a8 {
		border-bottom: 1upx solid #F1F1F1;
		height: 150upx;
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.a9 {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 20%;
	}

	.b1 {
		background-color: #F76F3F;
		height: 30upx;
		line-height: 30upx;
		font-size: 20upx;
		text-align: center;
		color: #FFFFFF;
		width: 80upx;
		border-top-left-radius: 20upx;
		border-bottom-right-radius: 20upx;
	}

	.b2 {
		height: 80upx;
		width: 80upx;
		margin-top: 10upx;
	}

	.b3 {
		height: 80upx;
		width: 80upx;
		border-radius: 50%;
	}

	.b4 {
		width: 70%;
		display: flex;
		flex-direction: column;
	}

	.b5 {
		font-size: 28upx;
		color: #101010
	}

	.b6 {
		font-size: 22upx;
		color: #999999;
		margin-top: 6upx;
		letter-spacing: 1upx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.b7 {
		position: absolute;
		background-color: red;
		height: 30upx;
		width: 30upx;
		border-radius: 100%;
		color: #FFFFFF;
		text-align: center;
		line-height: 30upx;
		font-size: 22upx;
		left: 100upx;
	}
</style>
